<html>
 <head>
  <title>Edge detection demo</title>
	<script src="common.js"></script>
  <script>
   <!--
   
   // also check out this: http://stackoverflow.com/questions/1890409/change-hue-of-an-image-with-php-gd-library

    red = 102;
    green = 102;
    blue = 255;
   
   var image = new Image();
   function bodyOnLoad() {
     image.onload = imageOnLoad;
     image.src = "hue.png";
   }
   function imageOnLoad() {
     var canvas = document.getElementsByTagName('canvas')[0];
     var context = canvas.getContext('2d');

     // draw the image onto the canvas
  //   context.drawImage(image, 0, 0);

    var s = new Stampt();

    // create canvas with the same size as image
    modifiedCanvas = document.createElement('canvas');
    modifiedCanvas.width = image.width;
    modifiedCanvas.height = image.height;
    modifiedContext = modifiedCanvas.getContext('2d');
    
    // copy image to canvas
    modifiedContext.drawImage(image,0,0);
    
/*
    // modify RGBA pixels
    var data = modifiedContext.getImageData(0,0,image.width,image.height);
    for (var i=0,m=image.width*image.height;i<m;i+=4) {
      data[i  ] = data[i  ];
      data[i+1] = data[i+1]*0;  // reset green channel
      data[i+2] = data[i+2];
      data[i+3] = data[i+3];
    }
    
    modifiedContext.putImageData(data,0,0);
*/

    // draw context on another context
  //  context.drawImage(modifiedContext,20,10);   <-- this does not work

/*
     // get the image data to manipulate
     var input = context.getImageData(0, 0, image.width, image.height);

     // get an empty slate to put the data into
     var output = context.createImageData(image.width, image.height);

     // alias some variables for convenience
     // notice that we are using input.width and input.height here
     // as they might not be the same as canvas.width and canvas.height
     // (in particular, they might be different on high-res displays)
     var w = input.width, h = input.height;
     var inputData = input.data;
     var outputData = output.data;

     // edge detection
     for (var i=0; i<w*h; i++) {
       outputData[i*4+0] = inputData[i*4+0]*red/256; // red
       outputData[i*4+1] = inputData[i*4+1]*green/256; // green
       outputData[i*4+2] = inputData[i*4+2]*blue/256; // blue
       outputData[i*4+3] = inputData[i*4+3]; // alpha
     }
      var ms = s.ms();
      document.title = ms;
      
     // put the image data back after manipulation
     context.putImageData(output, 0, 0, 2, 2);
     
     //var image2 = new Image();
     //image2.data = context.createImageData(output);
     
     //context.translate(30,0);
     //context.drawImage(image2,0,0);
*/     
   }
   -->
  </script>
 </head>
 <body onload="bodyOnLoad()">
  <canvas width="100" height="100" style="width: 100px; height: 100px; border: 1px solid red; background: silver;"></canvas>
 </body>
 
 <style>
 div.colorpicker {
  border: 1px solid black;
  position: absolute;
  left: 100px;
  top: 100px;
  background: white;
  padding: 4px;  
 }
 div.colorpicker div.color {
  border: 1px solid black;
  margin-top: 2px;
  padding-left: 2px;
  width: 256px;
  cursor: pointer; 
 }
 div.colorpicker div.preset {
  border: 1px solid black;
  width: 15px;
  height: 16px;
  float: left;
  margin-right: 1px;
  margin-bottom: 1px;
  cursor: pointer;
 }
 div.colorpicker div.title {
  clear: left;
 }
 div.colorpicker button {
  float: right;
  margin-left: 2px;
  margin-top: 2px;
 }
 </style>
 
 <script>
  function colorPreset(AThis,AEvent) {
    // click on preset color
    document.title = AThis.style.backgroundColor;
    var custom = document.getElementById('custom');
    custom.style.backgroundColor = AThis.style.backgroundColor;
    // set up RGB bars
    var c = AThis.style.backgroundColor.replace('rgb(','').replace(')','').split(',');
    // document.title = 1*c[0]+','+1*c[1]+','+1*c[2];
    var r = 1*c[0];
    var g = 1*c[1];
    var b = 1*c[2];
    document.title = "r="+r+' g='+g+' b='+b;
    document.getElementById('red').style.paddingLeft = r;
    document.getElementById('red').style.width = 256-r+2;
    document.getElementById('green').style.paddingLeft = g;
    document.getElementById('green').style.width = 256-g+2;
    document.getElementById('blue').style.paddingLeft = b;
    document.getElementById('blue').style.width = 256-b+2;
     
  }
function RGBToHex(rgb) {
  rgb /= 2;
var char = "0123456789ABCDEF";
return String(char.charAt(Math.floor(rgb / 16))) + String(char.charAt(rgb - (Math.floor(rgb / 16) * 16)));
}   
  function colorPresetRGB(AThis,AEvent) {
    // click on one of three RGB bars
    var x = AEvent.clientX-AThis.parentNode.offsetLeft-AThis.offsetLeft; 
    AThis.style.paddingLeft = Math.min(x,256);
    AThis.style.width = 258-x;
    var custom = document.getElementById('custom');
    var r = 1*document.getElementById('red').style.paddingLeft.replace('px','');
    var g = 1*document.getElementById('green').style.paddingLeft.replace('px','');
    var b = 1*document.getElementById('blue').style.paddingLeft.replace('px','');
    var s = RGBToHex(2*r)+RGBToHex(2*g)+RGBToHex(2*b);
    custom.style.backgroundColor = '#'+s; 
    document.title = s+' rgb='+r+','+g+','+b+' - '+custom.style.backgroundColor;
  }
  
  function colorButton(AOk) {
    // finally choose the button or cancel
    document.getElementById('colorpicker').style.display = 'none';    
  }
 </script>
 
 <div id="colorpicker" class="colorpicker">
   <div id="custom" class="preset" style="float: right; width: 32px; height: 32px; background: black; float: right;" onclick="colorPreset(this,event)"></div>
   <span style="float: right;">Current:&nbsp;</span>
   <div class="title">Preset colors:</div>
   <div class="preset" style="background: #ff0000;" onclick="colorPreset(this,event)"></div>
   <div class="preset" style="background: #00ff00;" onclick="colorPreset(this,event)"></div>
   <div class="preset" style="background: #0000ff;" onclick="colorPreset(this,event)"></div>
   <div class="preset" style="background: #000000;" onclick="colorPreset(this,event)"></div>
   <div class="preset" style="background: #ff00ff;" onclick="colorPreset(this,event)"></div>
   <div class="preset" style="background: #ffffff;" onclick="colorPreset(this,event)"></div>

   <div class="preset" style="background: #ff7777;" onclick="colorPreset(this,event)"></div>
   <div class="preset" style="background: #77ff77;" onclick="colorPreset(this,event)"></div>
   <div class="preset" style="background: #7777ff;" onclick="colorPreset(this,event)"></div>
   <div class="preset" style="background: #777777;" onclick="colorPreset(this,event)"></div>
   <div class="preset" style="background: #ff7744;" onclick="colorPreset(this,event)"></div>
   <div class="preset" style="background: #ffff77;" onclick="colorPreset(this,event)"></div>
   <div class="title"></div>
   <div id="red" class="color" style="background: #F77;" onclick="colorPresetRGB(this,event)">|</div>
   <div id="green" class="color" style="background: #7F7;" onclick="colorPresetRGB(this,event)">|</div>
   <div id="blue" class="color" style="background: #AAF;" onclick="colorPresetRGB(this,event)">|</div>
   <button onclick="colorButton(true)">OK</button>
   <button onclick="colorButton(false)">Cancel</button>
 </div>
 
</html>













































